<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/personal.css">
    <link rel="stylesheet" href="../font-awesome-4.7.0/css/font-awesome.min.css">
    <link rel="stylesheet" href="../css/page.css">
    <style>
        #time_select {
            width: 83.348px;
            height: 34px;
            margin-left: 7%;
            margin-top: 17px;
            border: 1px solid #cecece;
            border-radius: 50px;
            color: #999;
            outline: none;
            float: left;
        }

        .doctor {
            width: 88.324px;
            height: 34px;
            margin-left: 3%;
            margin-top: 17px;
            border: 1px solid #cecece;
            border-radius: 50px;
            text-indent: 2px;
            color: #999;
            float: left;
        }

        .search {
            float: left;
            margin-left: 3%;
            margin-top: 16px;
            position: relative;
            cursor: pointer;
        }

        .search_input {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 50%;
            background-color: #16dcb8;
            text-align: center;
        }

        .search_i {
            position: absolute;
            width: 40px;
            height: 40px;
            top: 0;
            left: 0;
            text-align: center;
            line-height: 40px;
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="content">
        <div class="content_header">
            <strong>我的病例</strong>
        </div>
        <div class="clear">
            <select name="" id="time_select">
                <option value="">选择医生</option>
            </select>
            <input type="text" name="" id="" class="doctor" placeholder="请输主治医生">
            <div class="search">
                <input type="button" value="" class="search_input">
                <i class="fa fa-search search_i"></i>
            </div>
        </div>
        <div class="list clear">
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
            <div class="sublist">
                <p><span>时间:</span><em>2018-12-5</em></p>
                <p><span>病情描述:</span><em>上呼吸道感染，扁桃体发炎...</em></p>
                <p><span>主治医师:</span><em>张医生</em></p>
            </div>
        </div>
        <nav class="page">
            <span class="left">
                < </span> <a href="###" class="pagenum" id="active">1</a>
                    <a href="###" class="pagenum">2</a>
                    <a href="###" class="pagenum">3</a>
                    <a href="###" class="pagenum">4</a>
                    <span class="right"> > </span>
                    <div class="jumpTo">到<input type="text" class="txt">页 <input type="button" value="Go" class="go">
                    </div>
        </nav>
    </div>
</body>

</html>
<script src="../js/json.js"></script>
<script>
    var oNav = document.getElementsByClassName("page")[0];
    var oSpan = oNav.getElementsByTagName("span");
    var oA = oNav.getElementsByTagName("a");
    var oTxt = oNav.getElementsByClassName("txt")[0];
    var oBtn = oNav.getElementsByClassName("go")[0];
    var num = 0;
    var oList = document.getElementsByClassName("list")[0];
    oList.innerHTML = "";
    for (var i = 0; i < person.length; i++) {
        var oSubList = document.createElement("div");
        oSubList.className = "sublist";
        oSubList.innerHTML = "<p><span>时间:</span><em>" + person[i].time + "</em></p><p><span>病情描述:</span><em>" + person[i].des + "</em></p><p><span>主治医生:</span><em>" + person[i].doc + "</em></p>";
        oList.appendChild(oSubList);
        oSubList.onclick = function () {
            var oSubListEm = this.getElementsByTagName("em");
            window.location = "./casedetails.html";
            localStorage.setItem("createTime", oSubListEm[0].innerHTML);
            localStorage.setItem("illness", oSubListEm[1].innerHTML);
            localStorage.setItem("doctor", oSubListEm[2].innerHTML);
        }
    }
    var oSubList = oList.getElementsByClassName("sublist");
    if (oSubList.length > 9) {
        for (var i = 9; i < oSubList.length; i++) {
            oSubList[i].style.display = "none";
        }
    }
    oSpan[0].onclick = function () {
        var oSubList = oList.getElementsByClassName("sublist");
        num--;
        for (var i = 0; i < oA.length; i++) {
            oA[i].id = "";
        }
        if (num <= 0) {
            num = 0;
        }
        oA[num].id = "active";
        if (num == 0 && oSubList.length > 9) {
            for (var i = 0; i < 9; i++) {
                oSubList[i].style.display = "block";
            }
            for (var i = 9; i < oSubList.length; i++) {
                oSubList[i].style.display = "none";
            }
        }
        if (num == 1 && oSubList.length>9) {
            for (var i = 0; i < 9; i++) {
                oSubList[i].style.display = "none";
            }
            for (var i = 9; i < oSubList.length; i++) {
                oSubList[i].style.display = "block";
            }
        }
    }
    oSpan[1].onclick = function () {
        var oSubList = oList.getElementsByClassName("sublist");
        num++;
        for (var i = 0; i < oA.length; i++) {
            oA[i].id = "";
        }
        if (num >= 3) {
            num = 3;
        }
        oA[num].id = "active";
        if (num == 1 && oSubList.length > 9) {
            for (var i = 0; i < 9; i++) {
                oSubList[i].style.display = "none";
            }
            for (var i = 9; i < oSubList.length; i++) {
                oSubList[i].style.display = "block";
            }
        }
    }
    for (var i = 0; i < oA.length; i++) {
        oA[i].index = i;
        oA[i].onclick = function () {
            for (var j = 0; j < oA.length; j++) {
                oA[j].id = "";
            }
            this.id = "active";
            num = this.index;
        }
    }
    oBtn.onclick = function () {
        if (oTxt.value >= 1 && oTxt.value <= oA.length + 1) {
            num = oTxt.value - 1;
            for (var i = 0; i < oA.length; i++) {
                oA[i].id = "";
            }
            oA[num].id = "active";
        }
        oTxt.value = "";
    }

    //搜索
    var oSelect = document.getElementsByTagName("select")[0];
    var oSelectOption = oSelect.getElementsByTagName("option");
    var oSelBtn = document.getElementsByClassName("search")[0];
    var oSelTxt = document.getElementsByClassName("doctor")[0];
    var arr = [];
    for (var i = 0; i < person.length; i++) {
        if (arr.indexOf(person[i].doc) == -1) {
            arr.push(person[i].doc);
        }
    }
    for (var i = 0; i < arr.length; i++) {
        var oSeloption = document.createElement("option");
        oSeloption.innerHTML = arr[i];
        oSelect.appendChild(oSeloption);

    }
    // console.log(oSelect);
    oSelBtn.onclick = function () {
        var onOff = -1;
        var index = oSelect.selectedIndex;
        var optionTxt = oSelect.options[index].text;
        if (optionTxt !== "选择医生") {
            oList.innerHTML = "";
            for (var i = 0; i < person.length; i++) {
                if (person[i].doc == optionTxt) {
                    onOff = i;
                    var oSubList = document.createElement("div");
                    oSubList.className = "sublist";
                    oSubList.innerHTML = "<p><span>时间:</span><em>" + person[i].time + "</em></p><p><span>病情描述:</span><em>" + person[i].des + "</em></p><p><span>主治医生:</span><em>" + person[i].doc + "</em></p>";
                    oList.appendChild(oSubList);
                    oSubList.onclick = function () {
                        window.location = "./casedetails.html";
                        var oSubListEm = this.getElementsByTagName("em");
                        localStorage.setItem("createTime", oSubListEm[0].innerHTML);
                        localStorage.setItem("illness", oSubListEm[1].innerHTML);
                        localStorage.setItem("doctor", oSubListEm[2].innerHTML);
                    }
                }
            }
            resetSearch();
        }
        if (optionTxt == "选择医生" && oSelTxt.value !== "") {
            oList.innerHTML = "";
            for (var i = 0; i < person.length; i++) {
                if (person[i].doc == oSelTxt.value) {
                    onOff = i;
                    var oSubList = document.createElement("div");
                    oSubList.className = "sublist";
                    oSubList.innerHTML = "<p><span>时间:</span><em>" + person[i].time + "</em></p><p><span>病情描述:</span><em>" + person[i].des + "</em></p><p><span>主治医生:</span><em>" + person[i].doc + "</em></p>";
                    oList.appendChild(oSubList);
                    oSubList.onclick = function () {
                        window.location = "./casedetails.html";
                        var oSubListEm = this.getElementsByTagName("em");
                        localStorage.setItem("createTime", oSubListEm[0].innerHTML);
                        localStorage.setItem("illness", oSubListEm[1].innerHTML);
                        localStorage.setItem("doctor", oSubListEm[2].innerHTML);
                    }
                }
            }
            resetSearch();
        }
        if (onOff == -1) {
            oList.innerHTML = "";
            for (var i = 0; i < person.length; i++) {
                var oSubList = document.createElement("div");
                oSubList.className = "sublist";
                oSubList.innerHTML = "<p><span>时间:</span><em>" + person[i].time + "</em></p><p><span>病情描述:</span><em>" + person[i].des + "</em></p><p><span>主治医生:</span><em>" + person[i].doc + "</em></p>";
                oList.appendChild(oSubList);
                oSubList.onclick = function () {
                    window.location = "./casedetails.html";
                    var oSubListEm = this.getElementsByTagName("em");
                    localStorage.setItem("createTime", oSubListEm[0].innerHTML);
                    localStorage.setItem("illness", oSubListEm[1].innerHTML);
                    localStorage.setItem("doctor", oSubListEm[2].innerHTML);
                }
            }
        }
        var oSubList = oList.getElementsByClassName("sublist");
        if (oSubList.length > 9) {
            for (var i = 9; i < oSubList.length; i++) {
                oSubList[i].style.display = "none";
            }
        }
        function resetSearch() {
            oSelect.selectedIndex = 0;
            oSelTxt.value = "";
        }
        num = 0;
        for (var i = 0; i < oA.length; i++) {
            oA[i].id = "";
        }
        oA[num].id = "active";
    }

</script>